<template>
<section class="login-home-bg">
    <div class="content">
      <div class="logo-bg" v-if="baseJs.intranet"><img src="../assets/logo-01.png" alt=""></div>
      <div class="bg-color">

        <div class="bg-img">
          <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
              <h3 class="title">系统登录</h3>
              <el-form-item prop="account" class="login-home-input">
                <div>
                  <i class="icon iconfont icon-zhanghu- icon-login"></i>
                <!-- <img src="icon-zhanghu-" alt=""> -->
                  <el-input type="text" v-model.trim="ruleForm2.account" auto-complete="off" placeholder="账户名称" @keyup.enter.native="handleSubmit2"></el-input>
                </div>
              </el-form-item>
              <el-form-item prop="checkPass" class="login-home-input">
                <div class="passwordBox">
                  <i class="icon iconfont icon-mima- icon-login"></i>
                  <el-input type="password" v-model.trim="ruleForm2.checkPass" @change="changeP" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleSubmit2"></el-input>
                  <!-- <input type="hidden" v-model.trim="ruleForm2.checkPass" />

                  <el-input type="text" v-model.trim="ruleForm2.checkPass" @change="changeP" class="passwordInputHide" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleSubmit2"></el-input> -->
                  <!-- <el-input type="text" v-model.trim="ruleForm2.checkPasshide" class="passwordInputShow" auto-complete="off" placeholder="请输入" ></el-input> -->
                </div>
              </el-form-item>
              <el-form-item prop="randCode" class="login-home-input">
                <div>
                  <i class="icon iconfont icon-yanzhengma- icon-login"></i>
                  <el-input type="" v-model="ruleForm2.randCode" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleSubmit2"></el-input>
                  <img :src="iconload"  alt="验证码" class="rangcode" @click="reloadRandCodeImage()">
                </div>
              </el-form-item>
              <el-checkbox v-model="checked"  class="remember" style="font-weight: 500;">记住密码</el-checkbox>
              <!-- <div style="height:"> -->
              <img src="../assets/download.png" class="downloadGG"><el-button type="text" @click="download" style="color:white">下载最新版浏览器</el-button>
              <!-- </div> -->
              <el-form-item style="width:100%;margin-bottom:20px">
                <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" >立即登录</el-button>
              </el-form-item>
               <el-form-item style="width:100%;margin-bottom:0">
                <el-button type="success" style="width:100%;" @click.native.prevent="goRegister" :loading="logining" >马上入驻</el-button>
              </el-form-item>
           </el-form>
          <div class="titles clearfix">
            <div>
              <!--<span class="titleSpan fl">欢迎使用</span>-->
              <img src="../assets/dzy_logo.png" alt="蒸汽超市应用" class="logopic fl">
              <h1>蒸汽超市管理平台</h1>
              <!--蒸汽超市-->
            </div>

            <!-- <div style="float:left"> -->

            <!-- </div> -->

            <!-- <div style="clear:both;"></div> -->
          </div>
          <div class="down-app">
            <ul>
              <li>
                <img src="../assets/downApp.png" alt="蒸汽超市app下载">
                <p>app下载</p>
              </li>
              <!-- <li>
                <img src="../assets/gzgdj.jpg" alt="广州供电局企业号">
                <p>关注公众号</p>
              </li> -->
            </ul>


          </div>
        </div>
      </div>
      <div class="foot"></div>

    </div>

</section>
</template>

<script>
  import { encode } from 'base-64';
  import Cookies from 'js-cookie';
  import {getRandCode } from '../api/api'
  export default {
    data() {
      return {

        logining: false,
        ruleForm2: {
          account:process.env.ADMIN,
          checkPass:process.env.PASSWORD,
          // account:'',
          // checkPass:'',
          randCode:'',
        },
        randCodeImg:'',
        iconload:'',

        rules2: {
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          checkPass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ],
          randCode:[
            { required: true, message: '请输入验证码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        },
        checked: false,
        data:[],
        loginDate:'',
      };
    },
    methods: {
      changeP(val){
        console.log(val);
        let txt=''
        for(let i =0;i<val.length;i++){
          txt+='*'
        }
        this.ruleForm2.checkPasshide=txt;
      },
      //下载浏览器
      download:function(){
        // if (confirm('您的浏览器版本过低，请下载使用新版浏览器，点击确定后将跳转下载谷歌浏览器！')) {
        var bits=window.navigator.platform.indexOf('32')>-1?32:64;
        window.open('/file/downloadController/getBrowser.do?version='+bits);

      },
      reloadRandCodeImage(){
        var date = new Date();
        getRandCode({'tokenId':date.getTime(1)}).then(res=>{
          this.loginDate=date.getTime(1);
          this.iconload=res.obj.replace("/\\r/g","");
          this.iconload=this.iconload.replace("/\\n/g","");
          this.iconload=this.iconload.replace("/\\+/g","");
          this.iconload='data:image/jpg;base64,'+this.iconload;
          // console.log(this.iconload);
        });
        // this.iconload=this.baseJs.api+"randCodeImage?a= "+ date.getTime(1);        
      },
      goRegister(){
      	this.$router.push({ path: '/register' });
      },
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            _this.logining = true;
            var loginParams = { userName:encode(this.ruleForm2.account), password:encode(this.ruleForm2.checkPass),randCode:this.ruleForm2.randCode,tokenId:this.loginDate};
            this.$store.dispatch('Login',loginParams).then(data=> {
                _this.logining = false;
                document.getElementById("loading").className='';
                // console.log('login Ok',this.$route.query,this.baseJs.getQueryStringByName('redirect'))
                // let redirect=this.baseJs.getQueryStringByName('redirect')
                let redirect=this.baseJs.getLoca('redirect')
                if(redirect){
                  console.log(redirect)
                  this.$router.replace({ path:redirect=='/'?'/index':redirect});
                  this.baseJs.setLoca('redirect','');
                }else{
                  console.log('/index')
                  this.$router.push({ path: '/index' });
                };

                if(this.checked==true){
                  var loginParamsuserNameCoookies = Cookies.set('userName',this.ruleForm2.account,{expries:7});
                  var loginParamscheckPassCoookies = Cookies.set('checkPass',this.ruleForm2.checkPass,{expries:7});
                  // console.log(loginParamsuserNameCoookies);
                }else{
                  Cookies.remove('userName','this.ruleForm2.account');
                  Cookies.remove('checkPass','this.ruleForm2.checkPass');
                }
              }).catch((error)=>{
                this.logining = false;
                this.$message({
                  message: error.msg,
                  type: 'error',
                  duration: 5 * 1000
                });
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      loadAccountInfo(){
        let accountInfo = Cookies.get('checkPass','loginParamscheckPassCoookies');
        //如果cookie里没有账号信息
          if(Boolean(accountInfo) == false){
              console.log('cookie中没有检测到账号信息！');
              return false;
          }
          else{
            //如果cookie里有账号信息
            this.ruleForm2.account=Cookies.get('userName','loginParamsuserNameCoookies');
            this.ruleForm2.checkPass=Cookies.get('checkPass','loginParamscheckPassCoookies');
            // console.log(this.ruleForm2.checkPass);
          }
      },

    },

    mounted() {
      this.reloadRandCodeImage();
      this.loadAccountInfo();

    },
  }

</script>

<style lang="scss" scoped>
  .login-container {
    position: relative;
    float: right;
    top: 10%;
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;
    background-clip: padding-box;
    border-radius: 0px;

   /* background-color: #F9FAFC;
    border: 2px solid #8492A6;
    margin-bottom: 20px;*/
    background-color: rgba(0,0,0,0.3);

    width: 360px;
    padding: 38px 30px 40px 30px;
    .title {

      /*text-align: center;
      margin: 0px auto 40px auto;*/
      font-size: 18px;
      color: #fff;
      margin-bottom: 18px;
      margin-top: 0px;
    }
    .remember {
      margin: 0px 0px 21px 0px;
    }
    .el-input__inner{
          height: 44px;
    }
    .passwordBox{position:relative;height:44px;
      .el-input{position:absolute;top:0;left:0;}
      .passwordInputHide{opacity:0;
      }
    }
    
    .icon-login{
      position: absolute;
      z-index: 5;
      color: #12b7f5;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
    .rangcode{
      position: absolute;
      z-index: 5;
      width:100px;
      height:32px;
      position: absolute;
      top: 6px;
      right: 5px;
      border: 1px solid #d7dcde;
    }
    .el-checkbox {
      color: #fff;
    }
    .el-button {
      border-radius:0;
    }
  }
  .content{
    margin:20px 0 20px 0;
    position:absolute;
    width:100%;
    height:540px;
    top:46%;
    margin:-270px 0 0 0;
  }
  .logo-bg{
    width:1024px;
    position:relative;
    margin:0 auto;
  }
  .bg-color{
    position:absolute;
    width:100%;
    height:480px;
    top:50%;
    margin:-210px 0 0 0;
    background: #80C8FA ;
  }
  .bg-img{
      margin:0 auto;
      width:1024px;
      height:480px;
      background:url('~assets/login_bg.png') no-repeat left bottom/100% 50%;
    }
  .logo-img{
      width:1024px;
    }

  .login-home-bg{
      height:100%;
      position:relative;
      background:#fff;
    }
    .titles{
      position:absolute;
      top: 15%;
      text-align:center;
      /*font-family: "微软雅黑";*/
      font-weight: 900;
    }
    .down-app{width:240px;
      height: auto;
      position: absolute;
      bottom: 20px;
      left: 10px;
      ul{overflow:hidden;
        li{float:left;width:120px;margin-left:20px;text-align:center}
      }
      img{width:120px;height:auto}
    }
    h1{
      float:left;
      font-size:37px;
      margin: 0 auto;
      color: #fff;
      /*font-family: '微软雅黑';*/
      font-weight: 900;
    }
    .logopic{
      vertical-align:middle;
      margin: 0 10px;
      float: left;
      height: 50px;
    }
    .foot{
      width:1024px;
      margin:0 auto;
      position:relative;
      font-size:14px;
      color:#b3b3b3;
      top: 102%;
    }
    .titleSpan{
      font-size: 37px;
      /*font-family: '微软雅黑';*/
      color: #fff;
      font-weight: 900;
    }
    .downloadGG{
     margin-left:60px;
     width:20px;
     height:20px;
     position:inherit;
     top:5px;
    }
</style>
<!-- .bg-color{
    background:#80C8FA;
  } -->
